import { memo } from "react"
import styled from "@emotion/styled"
import { NavLink, Outlet } from "react-router-dom"
import ButtonToTop from "@/components/composite/Rollup"
import { useNavigate } from "react-router-dom"
import Svg from "@/components/base/Svg"
import { PATHS } from "@/router/routes"

const PageContainerStyled = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1;
    background:
        radial-gradient(
            136.79% 100% at 100% 0%,
            rgba(255, 184, 219, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
            100% 61.68% at 0% 100%,
            rgba(179, 255, 204, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        #ebf3ff;
    background-attachment: fixed;
`

const ContentStyled = styled.div`
    flex: 1;
    overflow-y: auto;
    padding: 12rem 16rem;
    display: flex;
    flex-direction: column;
`

const HeadBgStyled = styled.div`
    background: rgba(255, 255, 255, 0.4);
`

const HeaderStyled = styled.div`
    padding: 12rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
`

const BackButtonStyled = styled.div`
    width: 8.63rem;
    height: 16.33rem;
    left: 18.6rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`

const TitleStyled = styled.div`
    font-family: Gilroy;
    font-size: 18rem;
    line-height: 28rem;
    font-weight: bold;
`

const TabStyled = styled(NavLink)`
    font-family: Gilroy;
    font-size: 14rem;
    line-height: 24rem;
    color: #666;
    padding-bottom: 8rem;
    text-decoration: none;
    position: relative;

    &.active {
        font-size: 18rem;
        color: #ff3366;
        font-weight: 500;
    }
`

const TabContainerStyled = styled.div`
    display: flex;
    gap: 24rem;
    padding: 0 17rem;
    justify-content: space-between;
`

const TransactionRecordPage = () => {
    const navigate = useNavigate()

    return (
        <PageContainerStyled>
            <HeadBgStyled>
                <HeaderStyled>
                    <BackButtonStyled onClick={() => navigate(PATHS.MY)}>
                        <Svg src="base_image/back.svg" />
                    </BackButtonStyled>
                    <TitleStyled>Transaction Record</TitleStyled>
                </HeaderStyled>
                <TabContainerStyled>
                    <TabStyled to="balance">Balance</TabStyled>
                    <TabStyled to="deposit">Deposit</TabStyled>
                    <TabStyled to="withdraw">Withdraw</TabStyled>
                    <TabStyled to="bonus">Bonus</TabStyled>
                </TabContainerStyled>
            </HeadBgStyled>
            <ContentStyled>
                <Outlet />
                <ButtonToTop />
            </ContentStyled>
        </PageContainerStyled>
    )
}

export default memo(TransactionRecordPage)
